import UserLayout from './index';
import { List } from 'antd';
import Link from 'next/link';
import axios from '../../utils/axios'

//[{_id:1,username:'user1'},...]
function UseList(props) {
  console.log('4.UseList.render'/*, props*/);
  return (
    <UserLayout>
      <List
        header={<div>用户列表</div>}
        footer={<div>共计多少{props.list&&props.list.length}个用户</div>}
        bordered
        dataSource={props.list}
        renderItem={(item: any) => (
          <List.Item key={item._id}>
            <Link as={`/user/detail/${item._id}`} href={{ pathname: `/user/detail`, query: { id: item._id } }}>
              <a>{item.username}</a>
            </Link>
          </List.Item>
        )}
      />
    </UserLayout>
  )
}

UseList.getInitialProps = async (ctx) => {
  console.log('2.UseList.getInitialProps ctx'/*, ctx*/);
  let response = await axios({ url: '/api/users', method: 'GET' });
  return { list: response.data.data };
}

export default UseList;
